<template>
	<view class="container">
		<Tabs :tabs="tabs" @tabChange="change" :curTabIndex="curTabIndex"/>
		<view class="orders_container">
			<view class="order" v-for="(item, index) in orderList" :key="index">
				<view class="order_number">
					<view class="title">订单编号</view>
					<view class="text">{{item.order_number}}</view>
				</view>
				<view class="order_price">
					<view class="title">订单金额</view>
					<view class="text">¥{{item.order_price}}</view>
				</view>
				<view class="order_date">
					<view class="title">订单日期</view>
					<view class="text">{{item.create_time | timestampToDisplay}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Tabs from '@/components/Tab.vue';
	import dayjs from 'dayjs';
	export default {
		data() {
			return {
				tabs: ['全部', '待付款', '待发货'],
				orderList: [],
				curTabIndex: 0,
			};
		},
		onLoad(options) {
			// 根据上一个页面传递过来的订单类型获取数据，如果没有传递，默认就是全部订单
			this.getOrder(options.orderType || 0);
			// 修改tab显示状态
			this.curTabIndex = options.orderType || 0;
		},
		components: {
			Tabs
		},
		methods: {
			// orderType 1表示全部订单 2 待付款 3 待发货
			async getOrder(orderType) {
				const token = uni.getStorageSync('token')
				const [error, res] = await uni.request({
					url: 'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/all',
					header: {
						Authorization: token
					},
					data: {
						orderType
					}
				})
				this.orderList = res.data.message.orders;
			},
			// 切换tab
			change(e) {
				// 0 表示全部，1 待付款 2 待发货
				if (e === 0) {
					this.getOrder(1)
				} else if (e === 1) {
					this.getOrder(2)
				} else if (e === 2) {
					this.getOrder(3)
				}
			}
		},
		// 使用filter实现日期的转换
		filters: {
			timestampToDisplay(timestamp) {
				// // 把timestamp转换为以毫秒为单位的格式
				// const date = new Date(timestamp * 1000)
				// // 获取年
				// const year = date.getFullYear();
				// // 获取月
				// const month = date.getMonth() + 1;
				// // 获取日
				// const day = date.getDate();
				
				// // 时
				// const hour = date.getHours();
				// const min = date.getMinutes();
				// const sec = date.getSeconds();
				
				// return `${year}/${month}/${day} ${hour}:${min}:${sec}`
				
				// 使用dayjs实现日期的显示
				return dayjs(timestamp*1000).format('YYYY/MM/DD hh:mm:ss')
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #FAFAFA;
		.orders_container {
			margin-top: 10rpx;
			height: calc(100vh - 88rpx);
			overflow: scroll;
			.order {
				background-color: #fff;
				margin-bottom: 10rpx;
				padding: 44rpx 32rpx;
				.order_number,.order_price, .order_date {
					display: flex;
					justify-content: space-between;
					padding: 10rpx 0;
					.title {
						color: #696969;
					}
					.text {
						color: #434343;
					}
				}
				.order_price .text {
					color:#EA4350;
				}
			}
		}
	}
</style>